<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<uni-search-bar bgColorCls="bg-steelblue" cancelColor="text-white" :focus="true" placeholder="输入姓名"
				@confirm="confirm"></uni-search-bar>
		</view>
		<view class="page__bd" style="padding-top: 100rpx;">
			<uni-list v-if="commonData.datas">
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item showArrow
						:title="item.avatar?(item.id === userId ? '我' : item.username):(item.id === userId ? '我' : item.username.substr(1, item.username.length))"
						:avatar="item.username.substr(0, 1)" :thumb="item.avatar"
						:avatarBgColor="logoColors.length?logoColors[item.id%logoColors.length].name:''"
						@click="infoTab(item,index)"
						:note="item.mobile && item.workMobile ? item.mobile + ', ' + item.workMobile : item.mobile ? item.mobile : ''"
						:extraText="item.posname ? item.posname : ''"></uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from '@/static/js/listLoad.js';
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	const app = getApp()
	export default {
		data() {
			return {
				logoColors: [],
				scrollTop: 0,
				dateStr: "",
				searchStr: "",
				commonData: {
					datas: []
				},
				dataMap: {},
				pageTitle: "搜索"
			}
		},
		computed: {
			...mapState(useLoginUserStore, ['userId']),
			datas() {
				return this.commonData.datas
			}
		},
		watch: {
			datas(newValue, oldValue) {
				let _that = this
				if (newValue) {
					newValue.forEach((item) => {
						_that.dataMap[item.id] = item
					})
				}
			}
		},
		created: function() {
			this.initData = this._.debounce(this.initData, 300)
		},
		methods: {
			confirm(e) {
				let _that = this
				if (e.value) {
					if (!_that.searchStr || (_that.searchStr && _that.searchStr != e.value.trim())) {
						_that.searchStr = e.value.trim()
						_that.initData()
					}
				} else {
					_that.searchClear()
				}
			},
			initData() {
				let _that = this
				_that.om.request('attendMonth/findSearchUserPage', {
					dateStr: _that.dateStr,
					userStr: _that.searchStr,
					page: 1,
					rows: 20,
				}).then(res => {
					if (res.rows.length) {
						_that.commonData.datas = res.rows
						res.rows.forEach((item) => {
							_that.dataMap[item.id] = item
						})
					} else {
						_that.om.toast("考勤与薪资核算业务主管可以查所有人；其他上级可查下级！")
					}
				})
			},
			searchClear() {
				this.commonData = {}
			},
			infoTab(item, index) {
				uni.setStorage({
					key: 'workhour',
					data: item
				});
				uni.redirectTo({
					url: './workhour'
				});
			}
		},
		onLoad(options) {
			let title = "搜索"
			uni.setNavigationBarTitle({
				title: title
			})
			this.logoColors = this.CuColorList
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},

		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			listLoad.reachBottom(this)
		}
	}
</script>

<style>

</style>